<template>
  <a-row :gutter="[16, { xs: 8, sm: 16, md: 24, lg: 32 }]">
    <a-col :span="12">
      <a-card :loading="loading" title="CPU" :bodyStyle="bodyStyle" :hoverable="true">
        <div class="ant-table ant-table-scroll-position-left ant-table-default">
          <table cellspacing="0" style="width: 100%;">
            <thead class="ant-table-thead">
              <tr>
                <th class="is-leaf"><div class="cell">属性</div></th>
                <th class="is-leaf"><div class="cell">值</div></th>
              </tr>
            </thead>
            <tbody class="ant-table-tbody">
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">核心数</div></td>
                <td><div class="cell" v-if="server.cpu">{{ server.cpu.cpuNum }}</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">用户使用率</div></td>
                <td><div class="cell" v-if="server.cpu">{{ server.cpu.used }}%</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">系统使用率</div></td>
                <td><div class="cell" v-if="server.cpu">{{ server.cpu.sys }}%</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">当前空闲率</div></td>
                <td><div class="cell" v-if="server.cpu">{{ server.cpu.free }}%</div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </a-card>
    </a-col>

    <a-col :span="12">
      <a-card :loading="loading" title="内存" :bodyStyle="bodyStyle" :hoverable="true">
        <div class="ant-table ant-table-scroll-position-left ant-table-default">
          <table cellspacing="0" style="width: 100%;">
            <thead class="ant-table-thead">
              <tr>
                <th class="is-leaf"><div class="cell">属性</div></th>
                <th class="is-leaf"><div class="cell">内存</div></th>
                <th class="is-leaf"><div class="cell">JVM</div></th>
              </tr>
            </thead>
            <tbody class="ant-table-tbody">
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">总内存</div></td>
                <td><div class="cell" v-if="server.mem">{{ server.mem.total }}G</div></td>
                <td><div class="cell" v-if="server.jvm">{{ server.jvm.total }}M</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">已用内存</div></td>
                <td><div class="cell" v-if="server.mem">{{ server.mem.used }}G</div></td>
                <td><div class="cell" v-if="server.jvm">{{ server.jvm.used }}M</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">剩余内存</div></td>
                <td><div class="cell" v-if="server.mem">{{ server.mem.free }}G</div></td>
                <td><div class="cell" v-if="server.jvm">{{ server.jvm.free }}M</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">使用率</div></td>
                <td><div class="cell" v-if="server.mem" :class="{'text-danger': server.mem.usage > 80}">{{ server.mem.usage }}%</div></td>
                <td><div class="cell" v-if="server.jvm" :class="{'text-danger': server.jvm.usage > 80}">{{ server.jvm.usage }}%</div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </a-card>
    </a-col>

    <a-col :span="24">
      <a-card :loading="loading" title="服务器信息" :bodyStyle="bodyStyle" :hoverable="true">
        <div class="ant-table ant-table-scroll-position-left ant-table-default">
          <table cellspacing="0" style="width: 100%;">
            <tbody class="ant-table-tbody">
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">服务器名称</div></td>
                <td><div class="cell" v-if="server.sys">{{ server.sys.computerName }}</div></td>
                <td><div class="cell">操作系统</div></td>
                <td><div class="cell" v-if="server.sys">{{ server.sys.osName }}</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">服务器IP</div></td>
                <td><div class="cell" v-if="server.sys">{{ server.sys.computerIp }}</div></td>
                <td><div class="cell">系统架构</div></td>
                <td><div class="cell" v-if="server.sys">{{ server.sys.osArch }}</div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </a-card>
    </a-col>

    <a-col :span="24">
      <a-card :loading="loading" title="Java虚拟机信息" :bodyStyle="bodyStyle" :hoverable="true">
        <div class="ant-table ant-table-scroll-position-left ant-table-default">
          <table cellspacing="0" style="width: 100%;">
            <tbody class="ant-table-tbody">
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">Java名称</div></td>
                <td><div class="cell" v-if="server.jvm">{{ server.jvm.name }}</div></td>
                <td><div class="cell">Java版本</div></td>
                <td><div class="cell" v-if="server.jvm">{{ server.jvm.version }}</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">启动时间</div></td>
                <td><div class="cell" v-if="server.jvm">{{ server.jvm.startTime }}</div></td>
                <td><div class="cell">运行时长</div></td>
                <td><div class="cell" v-if="server.jvm">{{ server.jvm.runTime }}</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td colspan="1"><div class="cell">安装路径</div></td>
                <td colspan="3"><div class="cell" v-if="server.jvm">{{ server.jvm.home }}</div></td>
              </tr>
              <tr class="ant-table-row ant-table-row-level-0">
                <td colspan="1"><div class="cell">项目路径</div></td>
                <td colspan="3"><div class="cell" v-if="server.sys">{{ server.sys.userDir }}</div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </a-card>
    </a-col>

    <a-col :span="24">
      <a-card :loading="loading" title="磁盘状态" :bodyStyle="bodyStyle" :hoverable="true">
        <div class="ant-table ant-table-scroll-position-left ant-table-default">
          <table cellspacing="0" style="width: 100%;">
            <thead class="ant-table-thead">
              <tr>
                <th class="is-leaf"><div class="cell">盘符路径</div></th>
                <th class="is-leaf"><div class="cell">文件系统</div></th>
                <th class="is-leaf"><div class="cell">盘符类型</div></th>
                <th class="is-leaf"><div class="cell">总大小</div></th>
                <th class="is-leaf"><div class="cell">可用大小</div></th>
                <th class="is-leaf"><div class="cell">已用大小</div></th>
                <th class="is-leaf"><div class="cell">已用百分比</div></th>
              </tr>
            </thead>
            <tbody v-if="server.sysFiles" class="ant-table-tbody">
              <tr :key="i" v-for="(sysFile,i) in server.sysFiles" class="ant-table-row ant-table-row-level-0">
                <td><div class="cell">{{ sysFile.dirName }}</div></td>
                <td><div class="cell">{{ sysFile.sysTypeName }}</div></td>
                <td><div class="cell">{{ sysFile.typeName }}</div></td>
                <td><div class="cell">{{ sysFile.total }}</div></td>
                <td><div class="cell">{{ sysFile.free }}</div></td>
                <td><div class="cell">{{ sysFile.used }}</div></td>
                <td><div class="cell" :class="{'text-danger': sysFile.usage > 80}">{{ sysFile.usage }}%</div></td>
              </tr>
            </tbody>
          </table>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
import { getServer } from '@/api/monitor/server'
import { Table } from 'ant-design-vue'

export default {
  name: 'Server',
  components: {
    ATable: Table
  },
  data () {
    return {
      // 加载层信息
      loading: true,
      // 服务器信息
      server: [],
      bodyStyle: {
        padding: '15px 20px'
      }
    }
  },
  created () {
    this.getList()
  },
  methods: {
    /** 查询服务器信息 */
    getList () {
      getServer().then(response => {
        this.server = response.data
        this.loading = false
      })
    }
  }
}
</script>
<style scoped>
.ant-table-thead > tr > th, .ant-table-tbody > tr > td{
  padding: 11px 16px;
}
.ant-table-thead > tr > th{
  background:#fff
}
.ant-table-thead > tr > th{
  color:#909399
}
</style>
